<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2022/10/16
  Time: 22:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
    <div id="app">
        <el-button type="primary" @click="products()">商品</el-button>
        <el-button type="primary" @click="orders()">订单</el-button>
        <div style="padding: 10px">
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column label="id" prop="id" ></el-table-column>
                <el-table-column label="商品名称" prop="name" ></el-table-column>
                <el-table-column label="商品价格" prop="price" ></el-table-column>
                <el-table-column label="商品描述" prop="description" ></el-table-column>
                <el-table-column label="库存" prop="store" ></el-table-column>
                <el-table-column label="创建时间" prop="createTime" ></el-table-column>
                <el-table-column label="更新时间" prop="updateTime" ></el-table-column>
                <el-table-column label="单位" prop="unit" ></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button @click="buy(scope.row.id)" type="primary" size="small">购买</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</body>
<script>
     var app=new Vue({
          el:"#app",
         data:{
             tableData: []
         },
         created() {
             this.load()
         },
         methods: {
              products(){
                  window.location.href='/products.jsp'
              },
             orders(){
                 window.location.href='/orders.jsp'
             },
             load() {
                 axios.get('/api/goods').then(res => {
                     this.tableData = res.data;
                     console.log(this.tableData);
                 })
             },
             buy(goodsId) {
                 axios.post( '/api/buy?goodsId=' + goodsId).then(res => {
                     if (res.data) {
                         this.$message.success("下单成功")
                         this.load()
                     } else {
                         this.$message.error("下单失败")
                     }
                 })
             }
         }
     })
</script>
</html>
